<template>
    <div id="cases">
        <el-table :data="tableData" style="width: 100%" :show-header="false" @row-click="onRowClick">
            <el-table-column>
                <template slot-scope="scope">
                    <el-row class="AH-title mb1vh">{{ `#`+(scope.$index+1) +'  '+ scope.row.AH_str }} </el-row>
                    <el-row class="fs mb1vh">
                        <el-button size="mini" type="danger" @click="handleClick(scope.row)">填写资料</el-button>
                    </el-row>
                    <el-row class="fs mb1vh">
                        {{ scope.row.LAAY }}</el-row>
                    <el-row class="fs mb1vh">
                       {{'承办法官：'+scope.row.CBFG}}
                    </el-row>
                    <el-row class="fs mb1vh">
                        {{'立案标的：'+scope.row.LABD + '元'}}
                    </el-row>
                    <el-row class="fs mb1vh" v-for="(d,i) in scope.row.dsrList" :key="d.XM">
                        {{`${d.DW}:${d.XM}(证件号码：${d.ZJHM})` }}
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNumber"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, prev,   next, jumper"
                :total="total">
        </el-pagination>
    </div>

</template>

<script>
    import {mapActions, mapState} from "vuex";

    export default {
        name: "Cases",
        data() {
            return {
                tableData: [],
                total :0,
                pageSize:5,
                pageNumber:0
            }
        },

        computed: {


            ...mapState([
                'step'
            ]),
        },

        methods:{


            ...mapActions([
                'getToken','setToken','resetToken'
                ,'setStep','setAH','setLABD','setTrialExtraId'
            ]),

            getList(){

                let params = {};

                params.pageSize = this.pageSize;
                params.pageNumber = this.pageNumber;

                return this.$api.getTrialList(params)
                    .then(res=>{

                        this.tableData = res.data.rows;
                        this.total = res.data.total;
                    })
            },

            handleSizeChange(pageSize){
                this.pageSize = pageSize;
            },

            handleCurrentChange(page){
                this.pageNumber = page;
            },

            onRowClick(row, column, event) {

                this.handleClick(row);
            },
            handleClick(row){
                this.setAH(row.AH)
                this.setLABD(row.LABD)
                this.setStep(this.step + 1);

         //       this.setTrialExtraId(row.trial_extra_id);
            }

        },

        created(){
            this.getList();
        },

        watch:{

            pageSize(){
                this.getList()
            },

            pageNumber(){
                this.getList();
            }
        },





    }
</script>

<style scoped>
    *{
        font-size: 2vw;
    }
    .AH-title {
        font-size: 5vw;
        font-weight: 800;
    }
    .fs{
        font-size: 4vw;
    }
    .mb1vh{
        margin-bottom: 1vh;
    }
</style>